class AssignRoleMenu extends React.Component {
    constructor(props){
        super(props);
        this.state = {menuList: []};
        this.tableRef = null;
    }

    componentDidMount(){
        postJson("/menu/query.x",null,(data)=>{
            postJson("/role/getMenuOfRole.x",{roleCode:this.props.roleCode},(roleMenus)=>{
                let menuListOrdered = [];
                reorderParents(data.data,null,menuListOrdered,"menuPar","menuCode");
                this.pageData = menuListOrdered;
                this.refs.table.checkboxValue = roleMenus.data;
                this.tableRef = this.refs.table;
                this.setState({menuList:menuListOrdered});
            })
        });
    }

    cancel(){
        window.history.back();
    }

    assignMenu(){
        let menus = this.refs.table.checkboxValue;
        let menuCodes = [];
        for(let i=0;i<menus.length;i++)
            menuCodes.push(menus[i].menuCode);

        postAJson("/role/saveRoleMenu.x",{roleCode:this.props.roleCode,menuCode : menuCodes},()=>{
            layui.layer.msg("保存成功");
        })
    }


    render(){
        return (
            <Frame header="分配角色菜单" headerBtns={
                [
                    <HeaderBtn onClick={()=>{
                        this.refs.table.collapseAll()}}><i className="fa fa-chevron-up"></i></HeaderBtn>,
                    <HeaderBtn onClick={()=>{this.refs.table.expandAll()}}><i className="fa fa-chevron-down"></i></HeaderBtn>
                ]}>
                <Form>
                    <Table expandable="true" ref="table" pageData={this.pageData} checkboxKeyname="menuCode" size="sm"
                           toolbar={
                               [
                                   <Button className="layui-btn" onClick={()=>this.assignMenu()}>确认分配</Button>,
                                   <Button className="layui-btn layui-btn-normal" onClick={()=>this.cancel()}>取消</Button>
                               ]
                           }>
                        <thead>
                        <tr>
                            <th width={70}></th>
                            <th>菜单名称</th>
                            <th>菜单级别</th>
                            <th>链接地址</th>
                            <th>权限字串</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.menuList.length>0?this.state.menuList.map((menu)=>{
                                return (
                                    <tr data-tt-id={menu.menuCode} data-tt-parent-id={menu.menuPar}>
                                        <td>&nbsp;<TCheckbox keyname="menuCode" data={menu} tableRef={this.tableRef}></TCheckbox></td>
                                        <td>{menu.type != 0?<i className="fa fa-key" style={{marginRight:5}}></i>:'' }{menu.menuName}</td>
                                        <td>{menu.menuLev}</td>
                                        <td>{menu.menuUrl}</td>
                                        <td>{menu.permission}</td>
                                    </tr>
                                )
                            }):''
                        }
                        </tbody>
                    </Table>
                </Form>
            </Frame>
        )
    }

}

ReactDOM.render(<AssignRoleMenu roleCode={getUrlParam("roleCode")}/>,document.getElementById("assignRole"));